{% extends "base.html" %}
{% block title %}Gallery{% endblock %}
{% block script %}
<link rel="stylesheet" type="text/css" href="/statics/css/gallery.css"/>
<script src="/statics/js/jquery.ui.widget.js"></script>
<script src="/statics/js/jquery.iframe-transport.js"></script>
<script src="/statics/js/jquery.fileupload.js"></script>
<script src="/statics/js/progressbar.js"></script>
<script>
$(document).ready(function(){
    $("#btn_fileupload").unbind("click").bind("click", function () {
	   $("#fileupload").click();
	});
});
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data){
            var error_flag = 0;
            $.each(data.files, function(index, file){
                var pattern = /(\.|\/)(gif|jpe?g|png)$/i; 
                if(!pattern.test(file.name)){
                    error_flag = 1;
                }
                else{
                    var curr_text = $("#file_list").text();
                    $("#file_list").text(curr_text+" "+file.name);
                }
            });
            if(error_flag==1){
                $("#progress").text("Unsupported file is added in your files.");
            }
            else{
                data.submit();
            }
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress_bar').progressBar(progress, { barImage: '/statics/images/progressbg_green.gif'});
        },
        fail: function (e, data){
            $("#progress").text("Upload is failed.["+data.errorThrown+"]:"+data.textStatus);
        },
        done: function (e, data) {
            $("#progress").text("Upload is completed.");
        },
    });
});
</script>
{% endblock %}
{% block userinfo %}
{% if user %}
<p id="user-info">
    <strong>{{ user.user_nickname }}</strong>, Welcome to Tuna Crew<br/>
    <a href="/change_pwd/">Change Password</a><br/>
    <a href="/logout/">Logout</a>
</p>    
{% endif %}
{% endblock %}
{% block menu_gallery %}id="current"{% endblock %}
{% block contentwrap_id%}-noside{% endblock %}
{% block content %}
	<div id="main-noside">
	<h2><a href="/gallery/post/">TuncaCrew Gallery</a></h2>
	    <div class="block">
           <span class="error">{{ error }}</span>
           <input id="fileupload" type="file" name="upload_img[]" data-url="{{action_url}}" multiple style="display: none;"/><br/>
           Upload File: <input id="btn_fileupload" type="button" value="search.." /><span id="file_list"></span><br/>
           <span id="progress">
                <span id="progress_bar"></span>
           </span>
           <form method="post" action="." class="login">
               <span>Content</span>
               <textarea name="content" id="id_content"></textarea>
               <input type="submit" value="Submit" />
           </form>
           </div>
    <!-- main ends -->  
    </div>
{% endblock %}